<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <h2>{{fullName}}</h2>
    <p>{{imgSrc}}</p>
    <h2 @click="ClickCeshi">Ecosystem</h2>
    <h2 @click="ClickCeshi1">Ecosystem</h2>

    <A v-show="isH"></A>
    <B></B>
    <div @click="plugin">哈哈哈</div>
    <div @click="test">测试if-hsow</div>
    <el-button @click="testApi">默认按钮</el-button>
    <p v-for="(value,key) in item" :key="key">{{ value }}</p>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <!-- <div v-show="isH">123</div> -->
    <div @click="btn2Click">哈哈哈</div>
  </div>
</template>

<script>
import A from "./a.vue";
import B from "./b.vue";
import Vue from 'vue'
import axios from 'axios'
import '../mock/api'
export default {
  name: "HelloWorld",
  components: {
    A,
    B
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App13456",
      isShow: true,
      firstName: "jk",
      lastName: "mouse",
      isH: true,
      item: {
        name:'hello'
      },
      input:''
    };
  },
  created() {
    this.testApi()
    console.log("------created--------");
  },
  mounted() {
    console.log("------mouted--------");
  },
  methods: {
    ClickCeshi() {
      this.fullName = "fullName的新值";
    },
    btn2Click(){
       this.$toast.show()
      //console.log(name)
    },
    test() {
      this.isH = !this.isH;
    },
    ClickCeshi1() {
      this.firstName = "123";
    },
    plugin() {
      console.log(this.$toast);
      this.$toast.show();
    },
    addProperty() {
      //this.item.push(5)
      console.log(this.item[0])
      //Vue.set(this.item,this.item[0], "新属性");
      this.item=Object.assign({},this.item,{age:10})
      //Vue.set(this.item,this.item[0], "新属性");
      //this.item.newProperty = "新属性"  // 为items添加新属性
      console.log(this.item); // 输出带有newProperty的items
    },
    testApi(){
      axios.get('http://20181024Mock.com/mode1/tableDataOne').then(res=>{
        console.log(res)
      })
    }
  },
  computed: {
    imgSrc: function() {
      return this.isShow ? "@/assets/logo.png" : "@/assets/logo.png";
    },
    fullName: {
      set: function(newValue) {
        this.firstName = newValue;
        console.log(newValue);
      },
      get: function() {
        console.log("--------get");
        return this.firstName + " " + this.lastName;
      }
    }
  },
  beforeUpdate() {
    console.log("------beforeUpdate--------");
  },
  updated() {
    console.log("------updated--------");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
